---
title: call page preview
aliases: [call page preview]
tags: 
cssClasses: wide-page
linter-yaml-title-alias: call page preview
---

> Hi <@959893034739322992> thanks for your snippets; great work! Here is what I did to 'custom page preview'. I think it is all just surface-level aesthetics…

# call page preview

```css
/* Custom page preview v1.4
   github.com/zamsyt */

/* ==== JIG - make the callout more like ==== */
/* ==== regular text wrapped around an image ==== */
.callout[data-callout="page-preview"] {/*
  --callout-icon: lucide-cat;*/
  --callout-color: none;
  mix-blend-mode: normal;
  padding: 0; /*
  /* ==== JIG - remove stuff ==== */
  background: unset;
  border: unset;
  margin: unset;
  padding: unset;
  clear: both;
  font-weight: normal;
}

/* ==== JIG - this gets rid of the icon entirely ==== */
.callout[data-callout="page-preview"] > * > .callout-icon {
    display: none;
}

/* Editing */
/* ==== JIG - jiggled with the title ==== */
.callout[data-callout="page-preview"] .callout-title {
  padding: 10px, 10px, 0, 0 ; 
    position: relative;
    color: var(--notion-nav);
  }
.markdown-source-view > * > * > * > * > * > * > .callout[data-callout="page-preview"] .callout-content {
  border: 1px solid var(--background-modifier-border);
  border-radius: var(--callout-radius); 
  /* JIG - knock the padding down ==== */
  padding: 0px;
}


.callout[data-callout="page-preview"] .callout-content {
  display: flex;
/* ==== JIG ==== */ 
  background: transparent/*var(--background-secondary)*/; }

.hover-popover .callout[data-callout="page-preview"] .callout-content {
  display: flex !important; }

/* text */
.callout[data-callout="page-preview"] .callout-content > :first-child {
  margin-top: 0.2em; }

/* image */
.callout[data-callout="page-preview"] .callout-content > :last-child:not(:first-child) {
  margin: 0;
  margin-left: auto;
  flex-basis: 40%;
  flex-shrink: 0; }
.callout[data-callout="page-preview"] .callout-content > :last-child:not(:first-child) img {
  display: block;
  object-fit:contain;
  height: 100%;
  width: 100%; }

/* Fill the whole window */
.hover-popover .markdown-preview-sizer > div > :not(.callout[data-callout="page-preview"]) {
  display: none; }
:root:root:root .hover-popover .markdown-preview-view {
  padding: 0; }
.hover-popover .markdown-preview-sizer {
  min-height: 0 !important; }
:root .hover-popover {
  min-height: var(--size-4-12); }
:root .hover-popover > .markdown-embed {
  height: auto;
  max-height: var(--popover-height); }
.hover-popover .callout[data-callout="page-preview"] {
  margin: 0; }

/* Hide callout title */
.hover-popover .callout[data-callout="page-preview"] .callout-title {
  display: none; }


/* Revert to normal preview when there's no Page preview callout.
   Requires installer v1.1.9 */
.hover-popover .markdown-preview-sizer:not(:has(.callout[data-callout="page-preview"])) > div > * {
  display: block; }
:root:root .hover-popover .markdown-preview-view:not(:has(.callout[data-callout="page-preview"])) {
  padding: var(--file-margins); }

/* Hide in reading view *
.markdown-reading-view > * > * > * > .callout[data-callout="page-preview"] {
  display: none; }
```
